<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<style>
    .page-w1920 .home-body-area{
        width: 1700px;
        height: 800px;
        margin: 60px auto;
        background-color: aqua;
    }
    .page-w1700 .home-body-area{
        width: 1500px;
        height: 800px;
        margin:60px auto;
        background-color: #f00;
    }
    .page-w1520 .home-body-area{
        width: 1200px;
        height: 800px;
        margin: 60px auto;
        background-color: yellow;
    }
    .home-body-area{
        position: relative;
    }
    .menu{
        background-color: blue;
        position:absolute ;
        left: -100px;
        top:0;
    }
    .menu li{
        width: 100px;
        height: 20px;
    }
    .menufixed{
        position: fixed;
    }
</style>
<body>
    <div class="home-body-area">
        <div class="menu">
           <li>1</li>
           <li>1</li>
           <li>1</li>
           <li>1</li>
           <li>1</li>
           <li>1</li>
           <li>1</li>
           <li>1</li>
           <li>1</li>
           <li>1</li>
           <li>1</li>
           <li>1</li>
           <li>1</li>
           <li>1</li>s
           <li>1</li>
           <li>1</li>
           <li>1</li>
           <li>1</li>
           <li>1</li>
           <li>1</li>
           <li>1</li>s
        </div>
        2222
    </div>
</body>
<script src="./jquery-1.11.3.min.js"></script>
<script>
    var _body = $(document.body);
    $(window).on('resize', function(){
			var _docWidth = document.documentElement.clientWidth;
			// 新加的
			_body.removeClass('page-w1920 page-w1700 page-w1520');
			if(_docWidth > 1900){
				_body.addClass('page-w1920');
				// _body.addClass('page-w1700');
		    }else if(_docWidth > 1700){
		     	_body.addClass('page-w1700');

		    }else{
		    	_body.addClass('page-w1520');
		    }
            var ddd= $('.home-body-area').offset().top;
          var left = $('.home-body-area').offset().left;
         
          var scrolltop = $(window).scrollTop();
          console.log('ddd-',ddd)
          console.log('left-',left)
          console.log('scrotop',scrolltop)
          if(scrolltop>=ddd){
            $('.menu').addClass('menufixed').css('left',left-100).css('top',ddd)
          }else{
            $('.menu').removeClass('menufixed').removeAttr("style")
          }
			
        })
        jQuery(window).bind('scroll', function(e){
          var ddd= $('.home-body-area').offset().top;
          var left = $('.home-body-area').offset().left;
          var scrolltop = $(window).scrollTop();
          if(scrolltop>=ddd){
            $('.menu').addClass('menufixed').css('left',left-100).css('top',ddd)
          }else{
            $('.menu').removeClass('menufixed').removeAttr("style")
          }
          
        });
</script>
</html>